<template>
  <el-drawer title="逻辑编排" :visible.sync="visible" :direction="direction" :show-close="false" size="90%" @close="handleClose">
    <div slot="title" class="blockly-drawer__header">
      <div>逻辑编排</div>
      <div class="blockly-drawer__btns">
        <!-- <div class="blockly-drawer__btn" @click="handleCloseClick">
          <IconPark size="14" fill="#409EFF" type="close" />关闭
        </div>
        <div class="blockly-drawer__btn" @click="handleSaveClick">
          <IconPark size="14" fill="#409EFF" type="save" />保存
        </div> -->
        <el-button icon="el-icon-close" @click="handleCloseClick">关闭</el-button>
        <el-button type="primary" icon="el-icon-upload" @click="handleSaveClick">保存</el-button>
      </div>
    </div>
    <div class="blockly-drawer__loading" v-loading="loading" element-loading-text="资源加载中"
      element-loading-background="rgba(255, 255, 255, 0.5)">
      <micro-app name="blockly" :url="url" inline disableSandbox @datachange="handleBlocklyDataChange"></micro-app>
    </div>
  </el-drawer>
</template>

<script>
import { Drawer, Message, Button } from "element-ui";
import { IconPark } from "@icon-park/vue/es/all";
import microApp from "@micro-zoe/micro-app";
import utils from './utils'

export default {
  name: "BlocklyEditor",
  components: {
    [Drawer.name]: Drawer,
    [Button.name]: Button,
    IconPark,
  },

  data () {
    return {
      loading: true,
      visible: false,
      direction: "rtl",
      url: window.urlForBlockMakerApp,
      funcValue: null,
      callback: null,
    };
  },

  methods: {
    removeLoading (timeout = 0) {
      if (this.loading) {
        setTimeout(() => {
          this.loading = false;
        }, timeout);
      }
    },

    async open ({ data = {}, callback } = {}) {
      const funcValue = data
      this.visible = true;
      this.funcValue = funcValue;
      this.callback = callback;
      await this.$nextTick();
      microApp.setData("blockly", {
        type: "INIT",
        data,
        utils,
        callback: (output) => {
          this.removeLoading();
          if (!this.callback) return;
          this.callback({
            ...this.funcValue,
            ...output,
          });
        },
      });
    },

    handleBlocklyDataChange (e) {
      // console.log("[micro]来自blockly的数据：", e.detail.data);
    },

    handleSaveClick () {
      microApp.setData("blockly", {
        type: "GET_OUTPUT",
        callback: (output) => {
          if (!this.callback) return;
          this.callback({
            ...this.funcValue,
            ...output,
          });
          Message.success('保存成功')
        },
      });
    },

    handleClose(){
      document.querySelector('.blocklyWidgetDiv').style.display = 'none'
    },

    handleCloseClick () {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-drawer__wrapper ::v-deep .el-drawer__header {
  margin-bottom: 16px;
}

.blockly-drawer {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__btns {
    display: flex;
    align-items: center;
  }

  &__btn {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    color: #409eff;

    &:not(:last-child) {
      margin-right: 24px;
    }

    .i-icon {
      margin-right: 5px;
      font-size: 0;
    }
  }
}
</style>
<style lang="scss">
.blocklyDropDownDiv {
  z-index: 10000;
}

.blockly-drawer__loading {
  width: 100%;
  height: 100%;

  .el-loading-spinner {
    margin-top: -15vh;
  }
}
</style>
